﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>班牌机</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="css/common2.css">
	<link rel="stylesheet" href="css/layui.css" />
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.vs--searchable .vs__dropdown-toggle {
			display: inline-block;
			min-height: 36px;
			border-color: #D2D2D2;
			width: 70% !important;
			border: 1px solid #B2B2B2;
			background-color: white !important;
			color: black !important;
			padding-left: 10px;
			height: 38px;
			line-height: 1.3;
		}

		.vs__actions {
			display: none;
		}

		.vs__dropdown-menu {
			margin-left: 27px;
			width: 70%;
		}

		.vs__selected-options {
			height: 100%;
		}
	</style>
</head>

<body>
	
	<div class="layui-row" id="vue-root">

		<div class="layui-col-md6 layui-col-md-offset3">

			<div class="layui-form-item" v-if="!isSchool">
				<label class="layui-form-label">学校名称</label>
				<div class="layui-input-block">
					<v-select name="schoolName" placeholder="请选择学校" label="name" :options="schools"
						:reduce="item=>item.id" v-model="schoolId"></v-select>
					<div class="checkout_state" v-text="err('schoolName')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">班级名称</label>
				<div class="layui-input-block">
					<select name="classesName" v-validate="'required'" class="layui-input school"
						v-model="item.classesId">
						<option :value="undefined" disabled="disabled">请选择班级</option>
						<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
						</option>
					</select>
					<div class="checkout_state" v-text="err('classesName')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">设备名称</label>
				<div class="layui-input-block">
					<input name="boardName" v-validate="'required'" autocomplete="off" placeholder="请输入设备名称"
						class="layui-input name" v-model="item.name">
					<div class="checkout_state" v-text="err('boardName')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">设备编码</label>
				<div class="layui-input-block">
					<input name="boardCode" v-validate="'required'" autocomplete="off" placeholder="请输入设备编码"
						class="layui-input tag" v-model="item.code">
					<div class="checkout_state" v-text="err('boardCode')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="margin-top: -10px;">学生进校<br>语音模板</label>
				<div class="layui-input-block">
					<input name="templateIn" autocomplete="off" placeholder="例：[className][name]来了"
						class="layui-input tag" v-model="item.templateIn">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="margin-top: -10px;">学生离校<br>语音模板</label>
				<div class="layui-input-block">
					<input name="templateOff" autocomplete="off" placeholder="例：[className][name]离校"
						class="layui-input tag" v-model="item.templateOff">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	
	
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {

				city: [],
				district: [],
				schools: [],
				classess: [],
				url: '/pc/board',
				schoolId: null,
				isSchool: false
			},
			created: function () {
				if (/school/.test(top.location.href)) {
					this.isSchool = true;
					this.schoolId = top_params().id;
				} else {
					var url = '/pc/school/all';
					if (/agent/.test(top.location.href))
						url += '/' + top_params().id;

					axios.get(url).then(function (res) {
						this.schools = res.data;
					}.bind(this));
				}

				this.init();
			},
			methods: {
				formatData: function (data) {
					axios.get('/pc/classes/' + data.classesId).then(function (res) {
						this.schoolId = res.data.schoolId;
					}.bind(this));
				},
			},
			watch: {
				schoolId: function (newValue, oldValue) {
					if (newValue) {
						axios.get('/pc/classes/all/' + newValue).then(function (res) {
							this.classess = res.data;
						}.bind(this));
					}
				}
			}
		}));
	</script>


</body>

</html>